import * as React from "react";
import { RouteComponentProps } from "react-router-dom";

import { ISku } from "../../types";
import * as api from "../../services/api";
import ProductItem from "../../components/ProductItem";

import style from "./style.less";
import Nav from "../../components/Nav";

interface State {
  rows: ISku[];
}

export default class Product extends React.Component<RouteComponentProps,State> {
  
  state: State = {
    rows: [],
  };

  async getData() {
    let result = await api.listSku();

    if (result.stat === "OK") {
      this.setState({
        rows: result.rows,
      });
    }
  }

  componentDidMount() {
    this.getData();
  }

  render() {
    return (
      <div className={style.back}>
        <div className={style.wrapper}>
          <main className={style.container}>
            {this.state.rows.map((item) => (
              <ProductItem sku={item} key={item.id} />
            ))}
          </main>
        </div>
        <Nav />
      </div>
    );
  }
}
